<template>
  <div :style="pageHeighStyle+'padding-bottom:100rpx'">
    <div class="WebmasterApplication_die">
      <div class="guoqi_time" v-show="user.isflg==0">免费试用截止到{{user.end_time}}过期</div>
      <div v-if="user.isflg==1" class="shenq">
        <div class="onde_div">
          <img src="https://www.zhaoshengku.net/banyuanbgssssss.jpg" alt />
        </div>
        <div class="two_div">
          <div>
            <img :src="user.info_avatar" alt mode="aspectFill" />
          </div>
          <div>
            <p class="p_one">{{user.info_nick}}</p>
            <p class="p_two">网站将于{{user.end_time}}到期</p>
          </div>
        </div>
      </div>
      <div class="divtwo">
        <div>网站信息</div>
        <div>
          <div v-for="(item,index) in wangzName" :key="index">
            <div>
              <span>{{item.name}}</span>
              <!-- <img :src="item.imgSrc" alt @click="changeName(index)" /> -->
            </div>
            <div>{{item.wName}}</div>
          </div>
        </div>
        <div></div>
        <div>
          <div>基本条款</div>
          <div>
            <div>
              <span>1.</span>
              <span>站长不得发布涉及黄赌毒、国家安全，垃圾广告等违规违法 的信息。</span>
            </div>
            <div>
              <span>2.</span>
              <span>站长有服从鸢尾花平台管理，自觉管理添加信息的义务，连 续60天没有更新信息，平台有权取消其站长资格。</span>
            </div>
            <div>
              <span>3.</span>
              <span>站长严禁使用技术手段进行刷量，作弊套取流量财富佣金。</span>
            </div>
          </div>
        </div>
      </div>

      <div class="divstr">
        <div>
          本次服务需支付
          <span>{{mai}}元/年</span>技术服务费
        </div>
        <div>(支付成功后返回个人中心)</div>
        <div :class="borderVal==1?'':'zhifu'">
          <img src="http://www.zhaoshengku.net/wx-%E5%BE%AE%E4%BF%A1%E6%94%AF%E4%BB%98.png" alt />
          <span>微信支付</span>
        </div>
        <div @click="borderTab">同意，并提交申请</div>
      </div>
      <div class="meng_jv"  v-if="user.isflg==0"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      borderVal: 1,
      wangzName: [
        // {
        //   name: "网站名称：",
        //   imgSrc: "http://www.zhaoshengku.net/wx-%E7%BC%96%E8%BE%91.png",
        //   wName: "太原市鸢尾花科技有限公司"
        // },
        {
          name: "网站地址：",
          imgSrc: "http://www.zhaoshengku.net/wx-%E7%BC%96%E8%BE%91.png",
          wName: ""
        }
      ],
      windowHeights: "",
      pageHeighStyle: "",
      wangzMc: "",
      wangzPd: 0,
      wangzTab: 0,
      showname: "网站名称",
      headerCode: "",
      service_id: 0,
      mai: "",
      endtime: "您还没有申请开通平台，成为平台站长请阅读以下声明提交申请即可",
      user: {}
    };
  },
  methods: {
    borderTab() {
      var _this = this;
      _this.borderVal = 2;
      var headerCode;
      headerCode = "Bearer " + wx.getStorageSync("koken");
      //第一步创建订单     按照正规流程，应先展示商品
      // 选中商品后访问此接口，但设计是直接支付
      // 所以service_id 写死，应根据不同角色传不同 service_id 老师应传 service_id:2
      wx.request({
        url: "https://api.zhaoshengku.net/index/order/createorder",
        method: "post",
        header: {
          Authorization: headerCode,
          "content-type": "application/x-www-form-urlencoded"
        },
        data: {
          service_id: _this.service_id
        },
        success: res => {
          if (res.data.code === 200) {
            var order_code = res.data.data.order_code;
            //通过订单号去调用微信支付，按正常流程应先确认订单
            //后调用此接口  因设计风格无此流程，此处简化，直接再次调支付
            wx.request({
              url: "https://api.zhaoshengku.net/index/WxProgram/pay",
              method: "post",
              header: {
                Authorization: _this.headerCode,
                "content-type": "application/x-www-form-urlencoded"
              },
              data: {
                order_code: order_code
              },
              success: result => {
                wx.requestPayment({
                  timeStamp: result.data.data.timeStamp + "",
                  nonceStr: result.data.data.nonceStr,
                  package: "prepay_id=" + result.data.data.prepay_id,
                  signType: "MD5",
                  paySign: result.data.data.sign,
                  success: function(res) {
                    wx.request({
                      url: "https://api.zhaoshengku.net/index/member/getinfo",
                      method: "post",
                      header: {
                        Authorization: _this.headerCode
                      },
                      success: res => {
                        if (res.data.code == 200) {
                          wx.request({
                            url:
                              "https://api.zhaoshengku.net/index/member/getinfo",
                            method: "post",
                            header: {
                              Authorization: _this.headerCode
                            },
                            success: res => {
                              if (res.data.code == 200) {
                                this.$store.state.myxinxi = res.data.data;
                              }
                            }
                          });
                          _this.endtime =
                            "您已成功开通，至" +
                            res.data.data.end_time +
                            "过期";
                          _this.$store.state.myxinxi = res.data.data;
                          wx.showToast({
                            title: "您已成功开通此服务！",
                            icon: "true",
                            duration: 1000
                          });
                          setTimeout(() => {
                            wx.switchTab({
                              url: "/pages/my/main"
                            });
                          }, 1000);
                        }
                      },
                      fail: res => {
                        console.log(res);
                        if (res.errMsg) {
                          wx.showToast({
                            title: "请检查网络连接！",
                            icon: "none",
                            duration: 1500
                          });
                        }
                      }
                    });
                  },
                  fail: function(res) {},
                  complete: function(res) {}
                });
              },
              fail: res => {
                console.log(res);
                if (res.errMsg) {
                  wx.showToast({
                    title: "请检查网络连接！",
                    icon: "none",
                    duration: 1500
                  });
                }
              }
            });
          }
          if (res.data.code === 401) {
            wx.showToast({
              title: "未登录！",
              icon: "none",
              duration: 2500
            });
            setTimeout(function() {
              wx.navigateTo({
                url: "/pages/loginRegister/main"
              });
            }, 1000);
            _this.onload = true;
          }
        },
        fail: res => {
          console.log(res);
          if (res.errMsg) {
            wx.showToast({
              title: "请检查网络连接！",
              icon: "none",
              duration: 1500
            });
          }
        }
      });
    },
    changeName(e) {
      this.wangzPd = e;
      this.wangzTab = 1;
      if (e == 0) {
        this.showname = "网站名称";
      } else {
        this.showname = "网站地址";
      }
      this.pageHeighStyle = this.windowHeights + ";overflow:hidden";
    },
    // 修改网站前缀
    wangzDele() {
      this.wangzTab = 0;
      this.pageHeighStyle = ";";
      if (this.wangzPd == 0) {
        wx.request({
          url: "https://api.zhaoshengku.net/index/member/putwebmaster",
          method: "post",
          data: {
            domain: this.wangzMc
          },
          header: {
            Authorization: this.headerCode,
            "X-Requested-With": "xmlhttprequest"
          },
          success: res => {
            if (res.data.code == 200) {
              wx.showToast({
                title: "提交成功，等待审核！",
                icon: "true",
                duration: 1000,
                mask: true
              });
            }
          },
          fail: res => {
            console.log(res);
            if (res.errMsg) {
              wx.showToast({
                title: "请检查网络连接！",
                icon: "none",
                duration: 1500
              });
            }
          }
        });
      }
    }
  },
  mounted() {
    this.borderVal = 1;
    wx.getSystemInfo({
      success: res => {
        this.windowHeights = "height:" + res.windowHeight * 2 + "rpx";
      }
    });
    // 设置头
    wx.setNavigationBarTitle({
      title: "站长申请"
    });
    this.wangzMc = this.$store.state.myxinxi.info_subdomain;
    // 验证token
  },
  onLoad(option) {
    this.user = this.$store.state.myxinxi;
    this.user.end_time=this.user.end_time.substring(0,10)
    this.wangzName[0].wName =
      "http://" + this.$store.state.myxinxi.info_subdomain + ".zhaoshengku.com";
    var token = wx.getStorageSync("koken");
    this.headerCode = "Bearer " + token;
    if (option.inf_type == 4) {
      this.service_id = 1;
    } else {
      this.service_id = 2;
    }
    // 获取订单详情
    wx.request({
      url: "https://api.zhaoshengku.net/index/service/getServicecontent",
      method: "post",
      data: {
        id: this.service_id
      },
      header: {
        Authorization: this.headerCode
      },
      success: res => {
        if (res.data.code == 200) {
          this.mai = res.data.data.service_price;
        }
      },
      fail: res => {
        console.log(res);
        if (res.errMsg) {
          wx.showToast({
            title: "请检查网络连接！",
            icon: "none",
            duration: 1500
          });
        }
      }
    });
  },
  onPullDownRefresh() {
    wx.stopPullDownRefresh();
  }
};
</script>

<style scoped>
.WebmasterApplication_die {
  width: 100%;
  background: #eeeeee;
  position: relative;
}
.WebmasterApplication_die > .guoqi_time {
  width: 100%;
  height: 72rpx;
  background: url("https://www.zhaoshengku.net/wx-index_bg.png") center center
    no-repeat;
  background-size: 100% 100%;
  font-size: 28rpx;
  font-weight: bold;
  color: rgba(248, 121, 55, 1);
  line-height: 72rpx;
  padding-left: 50rpx;
  box-sizing: border-box;
  position: absolute;
  top: 0rpx;
  left: 0;
}
.WebmasterApplication_die > .shenq {
  background: #fff;
  box-sizing: border-box;
  position: relative;
}
.meng_jv{
  width: 50rpx;
  height: 50rpx;
  background: rgba(254, 252, 236, 1);
  position: absolute;
  top:10rpx;
  right:20rpx;
  z-index: 22222222;
}
.shenq > .onde_div {
  width: 100%;
  height: 240rpx;
}
.shenq > .onde_div img {
  width: 100%;
  height: 200rpx;
}
.shenq > .two_div {
  display: flex;
  height: 160rpx;
  margin: 0 88rpx;
  align-items: center;
  box-sizing: border-box;
  padding: 0 60rpx;
  border-radius: 20rpx;
  background: #2f2e35;
  color: #fff;
  font-size: 30rpx;
  position: absolute;
  top: 52rpx;
  left: 8rpx;
}
.shenq > .two_div img {
  width: 90rpx;
  height: 90rpx;
  border-radius: 50%;
  margin-right: 40rpx;
}
.two_div .p_one {
  margin-top: -15rpx;
}
.two_div .p_two {
  padding: 5rpx 10rpx;
  background: #0d0b0b;
  color: #ebcfb0;
  font-size: 24rpx;
  border-radius: 10rpx;
  margin-top: 11rpx;
}
.WebmasterApplication_die > .divtwo {
  background: #fff;
  box-sizing: border-box;
  padding: 0 30rpx 50rpx 30rpx;
}
.WebmasterApplication_die > .divtwo > div:nth-child(1) {
  font-size: 28rpx;
  height: 100rpx;
  text-align: center;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
  line-height: 100rpx;
}
.WebmasterApplication_die
  > .divtwo
  > div:nth-child(2)
  > div
  > div:nth-child(1) {
  align-items: center;
  display: flex;
}
.WebmasterApplication_die
  > .divtwo
  > div:nth-child(2)
  > div
  > div:nth-child(1)
  > span {
  font-size: 28rpx;
  font-weight: 500;
  color: rgba(0, 0, 0, 1);
  line-height: 55rpx;
}
.WebmasterApplication_die
  > .divtwo
  > div:nth-child(2)
  > div
  > div:nth-child(1)
  > img {
  width: 25rpx;
  height: 25rpx;
}
.WebmasterApplication_die > .divtwo > div:nth-child(2) {
  display: flex;
  justify-content: space-between;
}
.WebmasterApplication_die > .divtwo > div:nth-child(2) > div {
  box-sizing: border-box;
  width: 100%;
  height: 153rpx;
  padding-left: 15rpx;
  padding-top: 20rpx;
  box-shadow: #999999 0rpx 0rpx 20rpx;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
}
.WebmasterApplication_die
  > .divtwo
  > div:nth-child(2)
  > div
  > div:nth-child(2) {
  width: 100%;
  font-size: 24rpx;
  font-weight: 500;
  color: rgba(102, 102, 102, 1);
  line-height: 55rpx;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.WebmasterApplication_die > .divtwo > div:nth-child(3) {
  font-size: 22rpx;
  font-weight: 500;
  color: rgba(153, 153, 153, 1);
  line-height: 55rpx;
  text-align: right;
}
.WebmasterApplication_die > .divtwo > div:nth-child(4) {
  box-shadow: #999999 0rpx 0rpx 20rpx;
  padding-left: 20rpx;
  padding-right: 20rpx;
  padding-bottom: 60rpx;
}
.WebmasterApplication_die > .divtwo > div:nth-child(4) > div:nth-child(1) {
  font-size: 28rpx;
  font-weight: 500;
  color: rgba(102, 102, 102, 1);
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
}
.WebmasterApplication_die > .divtwo > div:nth-child(4) > div:nth-child(2) {
  font-size: 24rpx;
  font-weight: 500;
  color: rgba(102, 102, 102, 1);
  line-height: 32rpx;
}
.WebmasterApplication_die
  > .divtwo
  > div:nth-child(4)
  > div:nth-child(2)
  > div {
  margin-top: 22rpx;
  display: flex;
}
.WebmasterApplication_die
  > .divtwo
  > div:nth-child(4)
  > div:nth-child(2)
  > div
  > span:nth-child(1) {
  display: inline-block;
  width: 17rpx;
  height: 100%;
}
.WebmasterApplication_die > .divstr {
  margin-top: 20rpx;
  padding-top: 47rpx;
  background: #fff;
  margin-bottom: 100rpx;
}
.WebmasterApplication_die > .divstr > div:nth-child(1) {
  width: 100%;
  font-size: 28rpx;
  font-weight: 500;
  color: rgba(102, 102, 102, 1);
  line-height: 39rpx;
  text-align: center;
}
.WebmasterApplication_die > .divstr > div:nth-child(2) {
  width: 100%;
  font-size: 28rpx;
  font-weight: 500;
  color: rgba(102, 102, 102, 1);
  line-height: 39rpx;
  text-align: center;
  margin-bottom: 74rpx;
}
.WebmasterApplication_die > .divstr > div:nth-child(1) > span {
  color: #2297d4;
}
.WebmasterApplication_die > .divstr > div:last-child {
  background: url("http://www.zhaoshengku.net/wx-%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A2%20%281%29.png")
    center center no-repeat;
  width: 685rpx;
  height: 98rpx;
  text-align: center;
  line-height: 98rpx;
  background-size: 100% 100%;
  margin: 100rpx auto;
}
.WebmasterApplication_die > .divstr > div:nth-child(3) {
  box-sizing: border-box;
  width: 333rpx;
  height: 153rpx;
  padding-left: 47rpx;
  padding-right: 47rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  box-shadow: #999999 0rpx 0rpx 20rpx;
  border-radius: 10rpx;
}
.WebmasterApplication_die > .divstr > div:nth-child(3) > img {
  width: 96rpx;
  height: 89rpx;
}
.WebmasterApplication_die > .divstr > .zhifu {
  border: 1rpx solid #2297d4;
}

.mengceng_rgba {
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  position: absolute;
  left: 0rpx;
  top: 0rpx;
}
.yuming {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}
.yuming span {
  font-size: 24rpx;
  font-weight: bold;
  color: rgba(102, 102, 102, 1);
  display: inline-block;
  width: 300rpx;
  height: 62rpx;
  line-height: 62rpx;
}
.yuming input {
  width: 100rpx;
  text-align: center;
  border: 1rpx solid #e5e5e5;
  display: inline-block;
}
</style>
